<template>
  <div class="box">
    <common-head></common-head>
    <div class="info">
      <h4 class="info_title">{{info_content.title}}</h4>
      <p>
        <span class="time">发表时间:{{info_content.add_time | dateformat("YYYY-MM-DD HH:mm:ss") }}</span>
        <span class="click">点击:{{info_content.click}}</span>
      </p>
    </div>
    <hr />
    <ul>
      <li v-for="(item, index) in info_photo" :key="index">
        <img :src="item.src" alt class="info_img" @click="Preview(index)" />
      </li>
    </ul>
    <div class="clear"></div>
    <p class="content">{{info_content.content}}</p>
    <comment></comment>
  </div>
</template>
<script>
import { ImagePreview } from 'vant'
export default {
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component
  },
  props: ['id'],
  data () {
    return {
      info_photo: [],
      info_content: []
    }
  },
  methods: {
    async getInfoPhotoList () {
      const { data: res } = await this.$http.get(
        '/api/getthumimages/' + this.id
      )
      //   console.log(res)
      this.info_photo = res.message
    },
    async getinfoContent () {
      const { data: res } = await this.$http.get(
        '/api/getimageInfo/' + this.id
      )
      //   console.log(res)
      this.info_content = res.message[0]
      //   console.log(this.info_content)
    },
    Preview (index) {
      //   console.log(this.info_photo[index].src)
      var newInfoPhoto = []
      this.info_photo.filter((i) => {
        newInfoPhoto.push(i.src)
      })
      //   console.log(arry)
      ImagePreview({
        images: newInfoPhoto,
        startPosition: index
      })
    }
  },
  mounted () {
    this.getInfoPhotoList()
    this.getinfoContent()
  }
}
</script>
<style scoped lang='less'>
.box {
  margin: 0 10px;
}
.info {
  margin-top: 10px;
}
.info_title {
  text-align: center;
  color: #26a2ff;
  font-size: 15px;
}
.time {
  font-size: 13px;
  float: left;
  color: #8f8f94;
}
.click {
  font-size: 13px;
  float: right;
  color: #8f8f94;
}
hr {
  margin-top: 55px;
}
ul {
  margin: 0 0 0 7px;
}
ul li {
  float: left;
  width: 30%;
  padding: 5px;
}
.info_img {
  width: 100%;
  box-shadow: 1px 0 8px 1px rgba(0, 0, 0, 0.4);
}
.content {
  font-size: 15px;
}
/deep/ .van-image__error,
.van-image__img,
.van-image__loading {
  display: block !important;
  width: 350px !important;
  height: 350px !important;
  position: absolute !important;
  left: 21px !important;
  top: -204px;
}
.clear {
  clear: both;
}
</style>
